<template>
    <div>
        <div class="tpt-login">
            <img :src="logo1" alt="" style="z-index: 10000; margin-top: -35px; width: 80px;">
        <h2>酒店预订系统</h2>
        <form>
            <input type="text" v-model="loginForm.username" placeholder="用户名/手机号">
            <input type="password" v-model="loginForm.password" placeholder="密码">
            <p>
                <a href="#" @click="toRegister">立即注册</a>
                <!--<a href="#" target="_blank"> 忘记密码&nbsp;&nbsp;</a>-->
            </p>
                <button @click="submitdata">立即登录</button>
        </form>
        </div>
        <div class="block">
            <el-carousel height="950px">
                <el-carousel-item v-for="item in items" :key="item" >
                    <!--<img : src="" alt="">{{item}}-->
                    <!--<h >{{item}}</h>-->
                    <!--<el-image-->
                            <!--style="width: 100px; height: 100px"-->
                            <!--:src="item"-->
                    <!--&gt;</el-image>-->
                    <el-avatar :size="0">
                        <img :src="item" alt="">
                    </el-avatar>
                    <!--<h3 class="small">{{ item }}</h3>-->
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import image1 from '../../assets/image/background_01.jpg'
import image2 from '../../assets/image/background_02.jpg'
import image3 from '../../assets/image/background_03.jpg'
import image4 from '../../assets/image/background_04.jpg'
import image5 from '../../assets/image/background_05.jpg'
import logo from '../../assets/image/logo.png'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      items: [image1, image2, image3, image4, image5],
      logo1: logo
    }
  },
  methods: {
    submitdata () {
      let user = {
        username: this.loginForm.username,
        password: this.loginForm.password
      }
      console.log(this.loginForm)
      this.$axios.post('/api/hUser/check', user).then(res => {
        console.log(this.loginForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error('账号或密码错误')
        this.$message.success('登陆成功')
        setTimeout(() => {
          if (res.data.data.userType === 1) { this.$router.push('/main') } else this.$router.push('/map')
        }, 2000)
      })
    },
    toRegister () {
      setTimeout(() => {
        this.$router.push('/register')
      }, 2000)
    }
  }
}
</script>
<style>
    /*body {*/
        /*background: url("../../assets/background_03.jpg");*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*position: fixed;*/
        /*background-size: 100% 100%;*/
    /*}*/

    .tpt-login {
        width: 360px;
        height: 360px;
        padding: 50px 30px;
        background-color: white;
        border-radius: 8px;
        margin-top: 250px;
        margin-left: 720px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
    }

    .tpt-login h2 {
        font-size: 35px;
        font-weight: 500;
        padding-bottom: 10px;
        text-align: center;
        color: #333;
    }

    .tpt-login input {
        width: 340px;
        padding: 0 10px;
        margin-bottom: 20px;
        height: 55px;
        line-height: 55px;
        border: 0;
        background: #f5f5f5;
        font-size: 16px;
        color: #666;
    }

    .tpt-login button {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        width: 360px;
        background: #1e9fff;
        color: #fff;
        font-size: 16px;
        margin-top: 20px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }

    .tpt-login p {
        font-size: 14px;
        color: #777;
    }

    .tpt-login a {
        float: right;
        font-size: 15px;
        color: #3581b9;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 600px;
        margin: 0;
        width: 100%;
        height: 1100px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
